<script setup lang="ts">
//

// 定义 props 接收
defineProps<{
    loginfun: Function
}>()


function login() {
    console.log(111);


}
</script>

<template>
    <view class="headBackground">
        <view class="logoContainer">
            <image class="logo"
                src="https://tse4-mm.cn.bing.net/th/id/OIP-C.O0im1whkoott7Pad2VCPEwHaHa?w=178&h=180&c=7&r=0&o=5&pid=1.7"
                mode="scaleToFill" />
            <text class="logoText">PandaTV</text>
        </view>

    </view>

    <button class="loginButton" @tap="loginfun" type="warn">立即登录</button>
</template>

<style lang="scss" scoped>
page {
    width: 100%;
    height: 100%;
}

.headBackground {
    width: 100%;
    height: 50%;
    position: relative;

    .logoContainer {
        width: 150px;
        height: 150px;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        image {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            opacity: 0.8;
        }

        .logoText {
            width: 150px;
            display: block;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
        }
    }
}

.loginButton {

    width: 70%;

}
</style>